<div class="row logs-table-container" *ngIf="logs.length>0; else noLogMessage">
  <div class="col-12">
    <table id="logs-table" class="table table-bordered table-hover margin-bottom-20px logs-table">
      <thead>
        <tr>
          <th id="timestamp" class="width-20">Timestamp</th>
          <th id="severity" class="width-10">Severity</th>
          <th id="trace-id" class="width-10">Trace ID</th>
          <th id="summary" class="width-60">Summary</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let log of logs">
          <tr (click)="expandDetails(log)" [ngClass]="getClassForSeverity(log.logEntry.severity)">
            <td class="width-20" style="font-family: monospace;">{{ log.timestampForDisplay }}</td>
            <td class="width-10">{{ log.logEntry.severity }}</td>
            <td class="width-10">
              <span class="clickable" ngbTooltip="Click to add to filter" (click)="addTraceToFilter(log.logEntry.trace)">{{ log.traceIdForDisplay }}</span>
            </td>
            <td class="width-60">
              <div class="ellipsis">
                <tm-request-log-line *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.REQUEST_LOG" [log]="log.logEntry"
                  (addActionClassEvent)="addActionClassToFilter($event)"></tm-request-log-line>
                <tm-exception-log-line *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.EXCEPTION_LOG" [log]="log.logEntry"
                  (addExceptionClassEvent)="addExceptionClassToFilter($event)"></tm-exception-log-line>
                <tm-generic-log-line *ngIf="!log.logEntry.details || log.logEntry.details.event !== LogEvent.REQUEST_LOG && log.logEntry.details.event !== LogEvent.EXCEPTION_LOG" [log]="log.logEntry"></tm-generic-log-line>
              </div>
            </td>
          </tr>
          <tr *ngIf="log.isDetailsExpanded">
            <td colspan="4">
              <details>
                <summary class="title">source location:</summary>
                <pre class="clickable margin-left-3em wrap" ngbTooltip="Click to add to filter" (click)="addSourceLocationToFilter(log.logEntry.sourceLocation)">{{ log.logEntry.sourceLocation | json }}</pre>
              </details>
              <details>
                <summary class="title">resource:</summary>
                <pre class="margin-left-3em wrap">{{ log.logEntry.resourceIdentifier | json }}</pre>
              </details>
              <details *ngIf="log.logEntry.message" open>
                <summary class="title">message:</summary>
                <pre class="margin-left-3em wrap">{{ log.logEntry.message }}</pre>
              </details>
              <tm-request-log-details *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.REQUEST_LOG" [log]="log.logEntry" (addUserInfoEvent)="addUserInfoToFilter($event)"></tm-request-log-details>
              <tm-email-log-details *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.EMAIL_SENT" [log]="log.logEntry"></tm-email-log-details>
              <tm-exception-log-details *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.EXCEPTION_LOG" [log]="log.logEntry"></tm-exception-log-details>
              <tm-generic-log-details *ngIf="!log.logEntry.details || log.logEntry.details.event === LogEvent.FEEDBACK_SESSION_AUDIT" [log]="log.logEntry"></tm-generic-log-details>
              <div *ngIf="log.logEntry.trace">
                <span class="title">trace: </span>
                <span class="clickable" ngbTooltip="Click to add to filter" (click)="addTraceToFilter(log.logEntry.trace)">{{ log.logEntry.trace }}</span>
              </div>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</div>

<ng-template #noLogMessage>
  <div class="no-log-message">
    There are no logs in this time period.
  </div>
</ng-template>
